<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			div{
				border: solid 2px black;
				padding: 10px;
				margin: 10px;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<h2>{{title}} - {{s}}</h2>
			<!-- 在父组件调用子组件的位置，使用ref属性给子组件添加别名 -->
			<my-temp ref="c1"></my-temp>
		</div>
	</body>
	<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	
	<template id="temp">
		<div>
			<p>这是{{name}}组件</p>
			<!-- <p>{{ $parent.parentFn() }}</p> -->
			<!-- <p>{{ $parent.title }}</p> -->
			<p>{{s}}</p>
		</div>
	</template>
	
	<script type="text/javascript">
		let temp = {
			template:"#temp",
			data:()=>{
				return {
					name:"子 - a",
					s:""
				}
			},
			methods:{
				fn(){
					return "hello"
				}
			},
			mounted(){
				// console.log(this.$parent.title)
				// console.log(this.$parent.parentFn)
				// console.log(this.$parent.parentFn())
				// 在子组件中,可以使用this.$parent获取父组件的实例对象,从而使用父组件的数据或方法
				this.s = this.$parent.parentFn()
			}
		}
		
		let vm = new Vue({
			el:"#app",
			data:{
				title:"组件之间的传值-父传子",
				s:""
			},
			components:{
				myTemp:temp
			},
			methods:{
				parentFn(){
					return "hello - parent";
				}
			},
			mounted(){
				// console.log(this.$refs.c1.fn())
				// console.log(this.$refs.c1.name)
				// 在父组件内部,使用this.$refs找到所有具有别名的子组件,返回对象，根据这个对象中的别名，找到指定的子组件的实例
				this.s = this.$refs.c1.name
			}
		});
		
	</script>
</html>
